<template>
  <div>
    <el-row>
      <el-col :span="12">
          <el-form :model="formData" ref="form">
              <div v-for="(item,index) in columns" :key="index">
                <el-form-item :prop="item.prop" :label="item.label" :rules="rulesXs">
                     <el-input-number v-model="formData[item.prop]" :controls="false"></el-input-number>
                </el-form-item>
              </div>
          </el-form>
        <el-button @click="submitFormData">提交</el-button>
      </el-col>
      <el-col :span="12">
        <el-form
            ref="stockForm"
            :model="stockForm"
            class="zd-el-form"
            size="mini"
            inline
            label-width="160px"
        >
          <div
              v-for="(item, index) in formItemList"
              :key="index"
              class="el-form-item-box"
          >
            <el-form-item
                :label="item.label+':'"
                :prop="item.status"
                :rules="rulesItemStatus"
            >
              <el-select
                  v-model="stockForm[item.status]"
                  class="item-placeholder"
                  placeholder="请选择"
                  clearable
                  @change="val => setParamStatusListChange(val, index)"
              >
                <el-option
                    v-for="ite in setParamStatusList"
                    :key="ite.value"
                    :label="ite.name"
                    :value="ite.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
                v-if="stockForm[item.status] ==='2' || stockForm[item.status] ==='1'"
                :prop="item.value"
                :rules="rulesItemValue"
            >
              <el-input
                  v-model="stockForm[item.value]"
                  type="text"
                  min="0"
                  maxlength="10"
                  clearable
                  onkeydown.native="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              />
            </el-form-item>
            <el-tooltip
                class="item"
                effect="light"
                placement="top"
            >
              <div slot="content">{{ item.tooltip }}</div>
              <i
                  style="color: #D9D9D9;padding-top: 18px;"
                  class="el-icon-question"
              />
            </el-tooltip>
          </div>
        </el-form>　　
      </el-col>
    </el-row>

    <el-form :model="formTableData" ref="formDataRef">
      <el-table :data="formTableData.tableData">
        <el-table-column :prop="item.prop" :label="item.label" align="center" header-align="center" v-for="item in columns">
          <template v-slot="scope" >
            <el-form-item :prop="`tableData.${scope.$index}.${item.prop}`"
                          :rules="[{ required: true,  trigger: 'blur' ,context:this,prop:item.prop,row:scope.row,
                          validator:$validateNumber}]">
              <!--validator:(rule, value, callback) => validateNumber(rule, value, callback,scope.row,'ratio')}]--->
              <el-input-number  :controls="false" v-model.trim="scope.row[item.prop]"
                                @change="saveCell(scope.row,item.prop,`${scope.$index}`)" placeholder="请输入" class="w100"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>


    <el-form :model="formTableData2" ref="formDataRef2">
      <el-table :data="formTableData2.tableData">
        <el-table-column :prop="item.prop" :label="item.label" align="center" header-align="center" v-for="item in columns2">
          <template v-slot="scope" >
            <el-form-item :prop="`tableData.${scope.$index}.${item.prop}`"
                          :rules="[{ required: true,  trigger: 'blur' ,context:this,prop:item.prop,row:scope.row,
                          validator:$validateNumber}]">
              <!--validator:(rule, value, callback) => validateNumber(rule, value, callback,scope.row,'ratio')}]--->
              <el-input-number  :controls="false" v-model.trim="scope.row[item.prop]"
                                @change="saveCell(scope.row,item.prop,`${scope.$index}`)" placeholder="请输入" class="w100"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>



  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      rulesXs: [
        {
          required: true,
          validator: (rule, value, callback) => {
            let arr = this.columns.filter(item => item.prop === rule.field)
            let label = arr[0].label
            if (!value) {
              callback(new Error(`请输入${label}值`))
            } else {
              callback()
            }
          },
          trigger: ['blur']
          //trigger: ['blur', 'change']
        }
      ],
      columns:[
        {
          label:'系数1',
          prop:'xs1'
        },
        {
          label:'系数2',
          prop:'xs2'
        },
        {
          label:'系数3',
          prop:'xs3'
        }
      ],
      columns2:[
        {
          label: '通知单下发额度',
          prop: '',
          children: [
            {
              label: '考核得分',
              prop: 'assessmentScore'
            },
            {
              label: '奖金基数',
              prop: 'bonusRatio'
            },
            {
              label: '单位奖金系数',
              prop: 'deptRatio'
            },
            {
              label: '职务系数',
              prop: 'leadershipPositionRatio'
            },
            {
              label: '下发奖金金额',
              prop: 'totalAmount'
            },
          ]
        },
        {
          label: '奖惩明细',
          prop: '',
          children:[]
        }
      ],
      formData: {

      },
      formTableData2:{
        tableData: [
          {
            assessmentScore:2
          }
        ]
      },
      rulesItemStatus: [
        {
          id:'ceshi',
          validator: (rule, value, callback) => {

            console.log("rule:",rule)



            let temp = 1
            let statusArr = []
            for (let i in this.attrStatusArr) {
              if (i !== rule.field && this.stockForm[i] === '') {
                this.$refs.stockForm.clearValidate(i)
                statusArr.push(i)
                temp++
              }
            }
            let arr = this.formItemList.filter(item => item.status === rule.field)
            let label = arr[0].label
            if (value === '' && temp === this.formItemList.length) {
              callback(new Error(`请选择${label}状态`))
            } else {
              callback()
            }
          },
          trigger: 'change'
        }
      ],
      rulesItemValue: [
        {
          required: true,
          validator: (rule, value, callback) => {

            console.log("input rule:",rule)


            let arr = this.formItemList.filter(item => item.value === rule.field)
            let label = arr[0].label
            if (this.stockForm[arr[0].status] === '2' && value === '') {
              callback(new Error(`请输入${label}值`))
            } else {
              callback()
            }
          },
          trigger: ['blur', 'change']
        }
      ],

      formItemList: [
        {
          label: 'item1',
          name: 'attr1',
          status: 'attr1Status',
          value: 'attr1Value',
          tooltip: 'item1tooltio'
        },
        {
          label: 'item2',
          name: 'attr2',
          status: 'attr2Status',
          value: 'attr2Value',
          tooltip: 'item2说明'
        },
        {
          label: 'item3',
          name: 'attr3',
          status: 'attr3Status',
          value: 'attr3Value',
          tooltip: 'item3说明'
        },
        {
          label: 'item4',
          name: 'attr4',
          status: 'attr4Status',
          value: 'attr4Value',
          tooltip: 'item4说明'
        },
        {
          label: 'item5',
          name: 'attr5',
          status: 'attr5Status',
          value: 'attr5Value',
          tooltip: 'item5说明'
        },
        {
          label: 'item6',
          name: 'attr6',
          status: 'attr6Status',
          value: 'attr6Value',
          tooltip: 'item6说明'
        },
        {
          label: 'item7',
          name: 'attr7',
          status: 'attr7Status',
          value: 'attr7Value',
          tooltip: 'item7说明'
        }
      ],

      stockForm: {
        attr1Value: '',
        attr1Status: '',
        attr2Value: '',
        attr2Status: '',
        attr3Value: '',
        attr3Status: '',
        attr4Value: '',
        attr4Status: '',
        attr5Value: '',
        attr5Status: '',
        attr6Value: '',
        attr6Status: '',
        attr7Value: '',
        attr7Status: ''
      },

      setParamStatusList: [
        {
          value: '1',
          name: '系统默认'
        },
        {
          value: '2',
          name: '手工设置'
        },
        {
          value: '0',
          name: '关闭'
        }
      ],


      attrStatusArr: {
        attr1Status: '',
        attr2Status: '',
        attr3Status: '',
        attr4Status: '',
        attr5Status: '',
        attr6Status: '',
        attr7Status: ''
      },

      formTableData:{tableData:[{xs1:'1',xs2:'3',xs3:'3'}]},

    }
  },
  methods:{
    submit(){
      console.log("form:",this.forms)
    },
    submitFormData(){
      this.$refs.form.validate((valid)=>{
           console.log("valid:",valid)
      })
      console.log("this.formData:",this.formData)
    },
    setParamStatusListChange(val,index){

    },
    saveCell(rowData,prop,index){
      let flag = true ;
      this.$refs.formDataRef.validateField(`tableData.${index}.${prop}`,valid => { //被点击的单元格的验证
        console.log("valid:",valid,'!valid:',!valid)
        if (!valid){
          flag = true ;
        }else{
          flag = false ;
        }
      });
    },
    validateNumber(rule, value, callback){
       console.log("rule:",rule,"value:",value)
      let row = rule.row ;
      let prop = rule.prop;
      let cellValue = row[prop]
      if (!cellValue) {
        callback(new Error("请输入"))
      } else if (!(/^-?\d+(\.\d{1,2})?$/.test(cellValue))){
        callback(new Error("请输入整数或者小数保留两位小数"))
      }else{
        callback()
      }
    }
  }
}
</script>

<style scoped>

</style>